import React, { useState, useEffect } from 'react';

export default ({
  children,
  ...otherprops
}: React.AllHTMLAttributes<HTMLDivElement>) => {
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const [isDrag, setIsDrag] = useState(false);
  const [isDragIn, setIsDragIn] = useState(false);

  useEffect(() => {}, [isDrag]);
  return (
    <div
      onMouseDown={({ nativeEvent: { clientX, clientY } }) => {
        setIsDrag(true);
        let pointX = clientX - position.left;
        let pointY = clientY - position.top;
        document.onmousemove = (e) => {
          let left = e.clientX - pointX;
          let top = e.clientY - pointY;
          setPosition({ top, left });
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }}
      onMouseEnter={(e) => console.log('onMouseEnter', { ...e })}
      onMouseLeave={(e) => console.log('onMouseLeave', { ...e })}
      onMouseUp={() => setIsDrag(false)}
      style={{
        ...position,
        ...otherprops.style,
        position: 'absolute',
        opacity: isDrag ? 0.5 : isDragIn ? 0.7 : 1,
      }}
    >
      {children}
    </div>
  );
};
